<template>
  <div class="home">
    <NavBar />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in bannerList" :key="item.bannerId" @click="goToDetail(item.actionData)">
        <img :src="item.imgUrl" style="width:100%;display:block" />
      </van-swipe-item>
    </van-swipe>
    <FilmHeader />
    <router-view></router-view>
  </div>
</template>

<script>
import http from '../request/http'
import NavBar from "../components/NavBar.vue";
import FilmHeader from "./FilmHeader.vue";
export default {
  name: "Film",
  data() {
    return {
      bannerList:[]
    };
  },
  components: {
    NavBar,
    FilmHeader
  },
  methods:{
    goToDetail(value){
      let myid = JSON.parse(value).businessId
      this.$router.push('/detail/' + myid)
    }
  },
  mounted() {
    http({
      url: '/gateway?type=2&cityId=130100&k=6313855',
      // url: `/gateway?type=2&cityId=${this.$store.state.cityId}&k=6313855`,
      headers: {
        'X-Host': 'mall.cfg.common-banner'
      }
    }).then(res => {
      if (res.status == 0) {
        let { data } = res
        this.bannerList = data
      }
    })
  }
};
</script>
<style scoped>
.home {
  padding-bottom: 50px;
}
</style>
